<template>
	<view class="container">
    <view class="container-record" @click="handleToRecord">夺宝记录</view>
    <image style="position: fixed;right: 20rpx;bottom: 200rpx;z-index: 100;width: 100rpx;" src="@/static/查收.gif" @click="handleBuoy" mode="widthFix"></image>
    <view class="container-header">
      <image v-if="info.goodsHotImg" :src="info.goodsHotImg" mode="widthFix" class="heaer-bg"></image>
      <image v-else src="@/static/default.png" mode="widthFix"></image>
      <view class="header-main">
        <view style="height: 95rpx; overflow: hidden;" v-if="scrollList.length">
          <view ref="scroll" :style="'margin-top:-'+marginTop+'rpx;'">
            <view class="main-scroll" v-for="(item,index) in scrollList" :key="index" :class="(marginTop/2)-(index*23) === 0?'active':''"><span>{{item.userPhone}}获得{{item.goodsName}}</span></view>
          </view>
        </view>
        <view class="main-info">
          <view class="info-title">
            抽奖码剩余 
            <step-bar style="flex: 1; margin: 0 40rpx 0 30rpx;" :percent="info.remainingRate"></step-bar>
            <span v-if="info.totalNum">限量{{info.totalNum}}件</span>
          </view>
          <span class="info-time">开奖时间{{info.lotteryTime}}</span>
          <image v-if="info.state == 0" @click="handleReceive(info.sessionId)" src="@/static/免费领按钮.gif" mode="widthFix"></image>
          <image v-else-if="info.state == 1" @click="handleToLink(info.sessionId)" src="@/static/获取更多按钮.gif" mode="widthFix"></image>
          <image v-else @click="handleToLink(info.sessionId)" src="@/static/查看更多详情.png" mode="widthFix"></image>
        </view>
      </view>
      <uni-popup ref="draw" type="center">
        <draw-code :code="codeList" @on:CLOSE='$refs.draw.close();_getList()' @on:MORE="handleToLink(info.sessionId);$refs.draw.close();"></draw-code>
      </uni-popup>
      
      <view class="header-list">
        <view class="list-item" v-for="(item,index) in sessionList" :key="item.sessionId" :class="currentGood == index?'active':''" @click="handleChangeSession(index)">
          <view class="item-img">
            <image :src="item.goodsImg" mode="widthFix"></image>
            <span class="img-status" :class="item.sessionState == 1?'active':''">{{sessionStatus[item.sessionState]}}</span>
          </view>
          <span class="dot" style="margin: 10rpx 20rpx;">{{item.goodsDesc+item.goodsName}}</span>
        </view>
      </view>
    </view>
    
    <view class="container-category">
      <view v-for="(item,index) in categoryList" :key="item" :class="categoryVal === index?'active':''" @click="categoryVal = index;list = [];_getList()"><span>{{item}}</span></view>
    </view>
    
    <view class="container-goods">
      <view class="goods-title">
        <image :src="`../../static/title/${categoryList[categoryVal]}.png`" mode="widthFix"></image>
      </view>
      
      <goods-list :list="list" @on:UPDATE="_getList()"></goods-list>
    </view>
    
    <uni-popup ref="getIntegral" type="center">
      <view class="integral-popup">
        <image class="main-close" src="@/static/关闭.png" mode="widthFix" @click="handleClose"></image>
        <view style="padding: 20rpx; margin-top: 20rpx; background: #fff;">
          <view class="main-info">
            <yi-line>{{mainTitle}}</yi-line>
            <h2>{{titleH2}}</h2>
            <span>一起参与夺宝，赢星巴克全年咖啡</span>
            <button @click="handleClose">{{titleBtn}}</button>
          </view>
        </view>
      </view>
    </uni-popup>
    
	</view>
</template>

<script>
  import goodsList from '@/components/goods-list.vue'
  import stepBar from '@/components/step-bar.vue'
  import DrawCode from '@/components/popup-draw-code.vue'
  const yiLine = ()=>import('@/components/yi-line/yi-line')
  
  import {throttle,getUrlParam} from '@/utils/Tools.js'
  
	export default {
    components:{goodsList,stepBar,DrawCode,yiLine},
		data() {
			return {
        scrollList:[],
				marginTop: 0,
        currentGood:0,
        categoryList:['美食专场','VIP会员','护肤美妆','电子数码','小家电'],
        categoryVal:0,
        timer:'',
        list:[],
        sessionList:[],
        sessionStatus:['未开始','进行中','开奖后','已结束'],
        info:{},
        codeList:[],
        mainTitle:'助力失败',
        titleH2:'您已助力过好友的邀请',
        titleBtn:'马上参与'
			}
		},
    onLoad(){
      this.handleReceive = throttle(this.handleReceive,2000)
      const share = getUrlParam(null,'share')
      if(share){
        const headers = {
          sign: this.$sign
        }
        this.$get(`/code/fissionTreasureCode?userPhone=${this.$mobile}&shareCode=${share}`,'','',headers).then(res=>{
          if(res.code == 200){
            this.mainTitle = '已为好友助力成功'
            this.titleH2 = '帮助好友获得1个夺宝码'
          }else{
            this.titleH2 = res.msg
          }
          if(res.code == '201' || res.code == '0007'){
            this.titleBtn = '我知道了'
          }
          this.$refs.getIntegral.open()
          this.$point({
            action_code:"960000012",//对照表填 必须传
            action_type:"enter",//对照表填 必须传
            params: [{
              k: "active_id",  //必须传
              v: "jfdb",
            },
            {
              k: "user_phone", //必须传
              v: this.$mobile,
            },
            {
              k: "user_ip",  // 必须传
              v: this.$ip,
            },
            {
              k: "share",  // 必须传
              v: share,
            }],
          })
        })
      }
      setTimeout(_=>{
        this.$point({
          action_code:"960000000",//对照表填 必须传
          action_type:"enter",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          }],
        })
      },3000)
    },
    onShow() {
      this._getSessionList()
      this._getList()
      this.$get(`/sessions/rotationList`).then(res=>{
        if(res.code == 200){
          this.scrollList = res.data.rotationResultList
          if(this.scrollList.length>=3){
            this.scrollList.push(this.scrollList[0],this.scrollList[1])
            this.timer = setInterval(this.animationFunc, 2000);
          }
        }
      })
    },
    onHide(){
      clearInterval(this.timer)
    },
		methods: {
			animationFunc(){   ///   中奖记录滚动
				if(this.marginTop > this.scrollList.length*23){
					this.marginTop = 0;
				}
				let step = 0;
				const index = setInterval(()=>{
					this.marginTop = this.marginTop + 1;
					step++;
					if (step >= 46) {
						clearInterval(index);
					}
				}, 10);
			},
      handleClose(){
        this.$refs.getIntegral.close()
        location.href = location.origin + location.pathname
      },
      async handleReceive(e){  ///  点击了免费领取
        const headers = {
          sign: this.$sign
        }
        uni.showLoading({
          title:'加载中...'
        })
        const res = await this.$get(`/code/freeTreasureCode?userPhone=${this.$mobile}&sessionId=${e}`,'',1,headers)
        if(res.code == 200){
          this.codeList = [res.data.freeTreasureCode]
          this.$refs.draw.open()
          this._getSessionInfo(this.sessionList[this.currentGood].sessionId)
          this._getList()
        }else{
          this.$toast(res.msg)
        }
      
        this.$point({
          action_code:"960000001",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "jfdb",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          },
          {
            k: "session_id",  // 必须传
            v: e
          }],
        })
      },
      handleChangeSession(index){  //  切换主推商品
        this.currentGood = index
        this._getSessionInfo(this.sessionList[index]?.sessionId)
      },
      handleToRecord(){  ///  跳转夺宝记录
        uni.navigateTo({
          url:`/pages/index/records`
        })
      },
      handleToLink(e){ ///  去详情
        if(e){
          uni.navigateTo({
            url:`/pages/index/detail?id=${e}`
          })
        }
      },
      handleBuoy(){   //  点击了浮标
        this.$point({
          action_code:"960000013",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "srgh",
          },
          {
            k: "user_phone", //必须传
            v: this.$mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: this.$ip,
          }]
        })
        ms.navigateTo({
          target: 'https://u.10010.cn/tb5jm'
        });
      },
      ////       network 
      async _getSessionList(){ //   请求主推商品列表
        const res = await this.$get('/sessions/listTopSessions')
        if(res.code === '200'){
          this.sessionList = res.data.sessionList
          this._getSessionInfo(this.sessionList[this.currentGood]?.sessionId)
        }
      },
      async _getSessionInfo(id){  ///  请求主推商品信息
        uni.showLoading({
          title:'加载中...'
        })
        const headers = {
          sign: this.$sign
        }
        const res = await this.$get(`/sessions/getTopSession?userPhone=${this.$mobile}&sessionId=${id}`,'',1,headers)
        if(res.code === '200'){
          this.info = res.data.showTopSession
          Object.assign(this.info,{
            remainingRate:this.info.remainingRate?.replace('%','')
          })
        }else{
          this.$toast(res.msg)
        }
      },
      async _getList(){  ///   请求商品列表
        uni.showLoading({
          title:'加载中...'
        })
        const headers = {
          sign: this.$sign
        }
        const res = await this.$get(`/sessions/listIndexSesion?userPhone=${this.$mobile}&themeType=${this.categoryVal}`,'',1,headers)
        if(res.code === '200'){
          this.list = res.data.showListSessionList
        }else{
          this.$toast(res.msg)
        }
      }
		}
	}
</script>

<style lang="less" scoped>
.container{
  position: relative;
  font-size: 24rpx;
  &-record{
    position: fixed;
    top: 60rpx;
    right: 0;
    width: 40rpx;
    text-align: center;
    border-top-left-radius: 8rpx;
    border-bottom-left-radius: 8rpx;
    padding: 12rpx 0;
    z-index: 10;
    background: rgba(0,0,0,.3);
    color: #fff;
  } // .container-record end
  
  &-header{
    .header-main{
      position: relative;
      z-index: 1;
      margin: 0 30rpx;
      margin-top: -220rpx;
      .main-scroll{
        color: #fff;
        line-height: 46rpx;
        font-size: 22rpx;
        opacity: .3;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.active{
          opacity: 1;
        }
        span{
          background: rgba(0,0,0,.3);
          padding: 4rpx 16rpx;
          border-radius: 30rpx;
        }
      }
      
      .main-info{
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx 32rpx;
        .info-title{
          display: flex;
          align-items: center;
          span{
            color: #ccc;
          }
        }
        
        .info-time{
          display: inline-block;
          padding: 6rpx 20rpx;
          color: #d6341e;
          border: .3px solid #d6341e;
          margin: 24rpx 0 20rpx;
          border-radius: 6rpx;
        }
        
      }
    }
    
    .header-list{
      display: flex;
      margin-left: 30rpx;
      overflow-x: auto;
      padding-top: 60rpx;
      .list-item{
        width: 184rpx;
        flex-shrink: 0;
        margin-right: 14rpx;
        background: #fff;
        border-radius: 10rpx;
        padding-top: 30rpx;
        position: relative;
        transition: all .5s;
        top: 0;
        &.active{
          top: -20rpx;
          &::after{
            display: block;
            content: '';
            width: 26rpx;
            height: 26rpx;
            background: #fff;
            position: absolute;
            top: -13rpx;
            left: 50%;
            z-index: 1;
            transform: translate(-50%,0) rotate(45deg);
          }
        }
        .item-img{
          position: relative;
          .img-status{
            padding: 0 10rpx;
            position: absolute;
            bottom: 0;
            left: 0;
            line-height: 40rpx;
            font-size: 22rpx;
            background: #000;
            color: #fff;
            border-top-right-radius: 16rpx;
            text-align: center;
            &.active{
              background: linear-gradient(90deg,#d6a180,#b48659);
            }
          }
        }
      }
    }
    
  } // &-header end
  
  &-category{
    height: 100rpx;
    display: flex;
    margin: 42rpx 30rpx 0;
    font-size: 30rpx;
    color: #333;
    overflow-x: auto;
    view{
      height: 46rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
      padding-right: 20rpx;
      border-right: .3px solid #ccc;
      span{
        border-bottom: 1px solid transparent;
        padding-bottom: 6rpx;
      }
      &.active{
        color: #d6341e;
        font-weight: bold;
        span{
          border-color: #d6341e;
        }
      }
      &:last-child{
        border-right: 0;
      }
    }
  }  ///  &-category end
  
  &-goods{
    .goods-title{
      text-align: center;
      margin: 0 200rpx;
    }
    
  } // &-goods end
  
  
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: #c4c4c4;
  }
  
  .integral-main{
    text-align: right;
    width: 80vw;
    .main-close{
      width: 60rpx;
    }
    .main-info{
      text-align: center;
      padding: 40rpx;
      border: .5px dashed #efc39b;
      h2{
        margin: 20rpx 0 40rpx;
        color:#fb3d00;
        font-weight: 400;
        font-size: 50rpx;
      }
      span{
        color: #999;
        font-size: 24rpx;
      }
      button{
        background-color: #000;
        color: #ffeed1;
        font-size: 40rpx;
        line-height: 90rpx;
        border-radius: 50rpx;
        margin-top: 30rpx;
      }
    }
  }
  
  .integral-popup{
    text-align: right;
    width: 80vw;
    .main-close{
      width: 60rpx;
    }
    .main-info{
      text-align: center;
      padding: 40rpx;
      border: .5px dashed #efc39b;
      h2{
        margin: 20rpx 0 40rpx;
        color:#fb3d00;
        font-weight: 400;
        font-size: 44rpx;
      }
      span{
        color: #999;
        font-size: 24rpx;
      }
      button{
        background-color: #000;
        color: #ffeed1;
        font-size: 40rpx;
        line-height: 90rpx;
        border-radius: 50rpx;
        margin-top: 30rpx;
      }
    }
  }
  
}
</style>
